<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>仓库</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../../assets/styles/search.css">

</head>
<body style="overflow-x:hidden;background:#f3f3f3;">
<div class="btn-div">
    <button type="button" class="btn btn-primary"  data-toggle="modal" data-target="#demoModal">新增</button>
    <!--<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demoModal-1">编辑</button>-->
    <!--<button type="button" class="btn btn-primary"  data-toggle="modal" data-target="#demoModal-2">删除</button>-->
    <!-- <div class="search-box">
        <form action="">
            <select name="" id="">
                <option value=""></option>
                <option value=""></option>
            </select>
            <input type="text">
            <button type="button" class="btn btn-success">搜索</button>
        </form>
    </div> -->
</div>
<!-- 表格部分 -->
<div>
    <table class="table table-condensed">
        <thead>
        <tr>
            <th>用户账号</th>
            <th>用户密码</th>
            <th>用户角色</th>
            <th class="operation">操作</th>
        </tr>
        </thead>
        <tbody id="tbody" th:each="user,iterStat : ${map.get('userList')}">
        <tr th:id="'tr_'+${user.userId}">
            <td th:text="${user.userName}"></td>
            <td th:text="${user.userPassword}"></td>
            <td th:text="${user.tbRole.roleName}"></td>
            <td class="operation">
                <button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#demoModal-1" th:onclick="'javascript:updateUserId('+${user.userId}+')'">修改</button>
                <button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#demoModal-2" th:onclick="'javascript:Values('+${user.userId}+')'">删除</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<!-- 分页部分 -->
<div class="footer-pager">
    <span>共<span id="pageCount" th:text="${map.get('pageCount')}"></span>页，当前第<span id="page" th:text="${map.get('page')}"></span>页，总共<span  th:text="${map.get('dataSize')}"></span>条数据</span>

    <ul class="pagination">
        <th:block th:if="${map.get('prePage')==1}">
            <li><a th:href="@{/index/getAllUser(page=${map.get('page')-1},size=4)}">&laquo;</a></li>
        </th:block>
        <th:block th:if="${map.get('prePage')==0}">
            <li><a href="#" disabled="true">&laquo;</a></li>
        </th:block>
        <th:block th:each="pageSize,iterStat : ${map.get('pageSize')}">
            <th:block th:if="${map.get('page')==iterStat.index+1}">
                <li class="active"><a th:href="@{/index/getAllUser(page=${iterStat.index+1},size=4)}" th:text="${iterStat.index+1}"></a></li>
            </th:block>
            <th:block th:if="${map.get('page')!=iterStat.index+1}">
                <th:block th:if="(${map.get('page')<=8 and iterStat.index+1>8}) or (${map.get('page')>8} and (${iterStat.index+1<map.get('page')-7 or iterStat.index+1>map.get('page')}))">
                    <li ><a hidden th:href="@{/index/getAllUser(page=${iterStat.index+1},size=4)}" th:text="${iterStat.index+1}"></a></li>
                </th:block>
                <th:block th:if="!((${map.get('page')<=8 and iterStat.index+1>8}) or (${map.get('page')>8} and (${iterStat.index+1<map.get('page')-7 or iterStat.index+1>map.get('page')})))">
                    <li ><a th:href="@{/index/getAllUser(page=${iterStat.index+1},size=4)}" th:text="${iterStat.index+1}"></a></li>

                </th:block>

            </th:block>
        </th:block>
        <th:block th:if="${map.get('nextPage')==1}">
            <li><a th:href="@{/index/getAllUser(page=${map.get('page')+1},size=4)}">&raquo;</a></li>
        </th:block>
        <th:block th:if="${map.get('nextPage')==0}">
            <li><a href="#" disabled="true">&raquo;</a></li>
        </th:block>
    </ul>
</div>
<!-- 弹出框 -->
<!-- <div class="modal fade" id="demoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">title</h4>
            </div>
            <div class="modal-body">提示内容</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div>
    </div> -->
</div>

<!-- 弹出框 -->
<!--新增弹出框-->
<div class="modal fade" id="demoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">新增用户</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal add" role="form" id="frm">
                    <div class="form-group ">
                        <label for="userName" class="col-sm-2 control-label">用户名称</label>
                        <div class="col-sm-10">
                            <input type="text" name="userName" class="form-control" id="userName" placeholder="请输入用户名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="userPassword" class="col-sm-2 control-label">用户密码</label>
                        <div class="col-sm-10">
                            <input type="text" name="userPassword" class="form-control" id="userPassword" placeholder="请输入用户密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="roleId"  class="col-sm-2 control-label">用户角色</label>
                        <div class="col-sm-10">
                            <select id="roleId" name="roleId" style="outline:none;" class="form-control">
                                <th:block th:each="role,iterStat : ${roleList}">
                                    <option th:text="${role.roleName}" th:value="${role.roleId}"></option>
                                </th:block>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary save"  data-dismiss="modal" id="save" onclick="addUser()">保存</button>
            </div>
        </div>

    </div>
</div>
<!--编辑弹出框-->
<div class="modal fade" id="demoModal-1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel-1">编辑用户</h4>
                <input hidden id="updateUserId" value="" name="updateUserId">
            </div>
            <div class="modal-body">
                <form class="form-horizontal compile" role="form">
                    <div class="form-group">
                        <label for="myName" class="col-sm-2 control-label">用户名称</label>
                        <div class="col-sm-10">
                            <input type="text" readonly name="myName" class="form-control" id="myName" value="用户名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="myPassword" class="col-sm-2 control-label">用户密码</label>
                        <div class="col-sm-10">
                            <input type="text"  name="myPassword" class="form-control" id="myPassword" value="用户密码">
                        </div>
                    </div>
                   <!-- <div class="form-group">
                        <label for="myRole"  class="col-sm-2 control-label">用户角色</label>
                        <div class="col-sm-10">
                            <input type="text" name="myRole" class="form-control" id="myRole" value="用户角色">
                        </div>
                    </div>-->
                    <div class="form-group">
                        <label for="myRole"  class="col-sm-2 control-label">用户角色</label>
                        <div class="col-sm-10">
                            <select id="myRole" style="outline:none;" class="form-control">
                                <option id="userRole" value="" ></option>
                                <th:block th:each="role,iterStat : ${roleList}">
                                    <option th:text="${role.roleName}" th:value="${role.roleId}"></option>
                                </th:block>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary save"  data-dismiss="modal" id="save1" onclick="save()">保存</button>
            </div>
        </div>

    </div>
</div>
<!--删除弹出框-->
<div class="modal fade" id="demoModal-2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="border: 0">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel-2">确认要删除当前用户吗</h4>
                <input hidden id="deleteUserId" value="" name="deleteUserId">
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer" style="border: 0">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary"  data-dismiss="modal" onclick="deleteUser()">确认删除</button>
            </div>
        </div>

    </div>
</div>
</div>
</body>

<script>
    $('.table tbody tr').mouseover(function () {
        var number = $(this).index();
        $('.table tbody tr td').eq(4 + (number) * 6).find('select:first').attr("id", "changeId");
    })
    $('.table tbody tr').mouseout(function () {
        var number = $(this).index();
        $('.table tbody tr td').eq(4 + (number) * 6).find('select:first').attr("id", "sel");
    });
    function saveJudge(form){
        var d = {};
        var t = form.serializeArray();
        console.log(JSON.stringify(t));
        $.each(t, function() {
            d[this.name] = this.value;
        });
        for (i=0;i<t.length;i++){
            if (t[i].value==''){
                alert("请输入相关信息");
                return false;
            }
        }
        alert("保存成功！");
    }
   /* $("#save").click(function (){
        saveJudge($(".form-horizontal.add"));
    });
    $("#save1").click(function (){
        saveJudge($(".form-horizontal.compile"));
    });*/
</script>

<script type="text/javascript" src="/page/js/user.js"></script>
</html>